<template>
  <div class="training-details" v-show="show">
    <section class="container">
        详情ID：{{ detailsInfo.id }}
    </section>
    <footer><el-button type="primary" @click="handleClose">关闭</el-button></footer>
  </div>
</template>

<script setup>
let props = defineProps({
  show: {
    type: Boolean,
    default: false,
  },
  detailsInfo: {
    type: Object,
    required: true,
  },
});

let emits = defineEmits(["close"]);

function handleClose() {
  emits("close", false);
}
</script>

<style lang="scss" scoped>
.training-details {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba($color: #000000, $alpha: 0.7);
  padding: 5vh 4vw;
  display: flex;
  flex-direction: column;
  .container {
    flex: 1;
    background: #fff;
    border-radius: 20px;
    padding: 2vw;
  }
  footer {
    text-align: center;
    padding-top: 2vh;
  }
}
</style>
